<!DOCTYPE html>
<html>
    <head>

        <link rel="canonical" href="http://www.jointjs.com/" />
        <meta name="description" content="Create interactive diagrams in JavaScript easily. JointJS plugins for ERD, Org chart, FSA, UML, PN, DEVS, LDM diagrams are ready to use." />
        <meta name="keywords" content="JointJS, JavaScript, diagrams, diagramming library, UML, charts" />

        <link href="http://fonts.googleapis.com/css?family=Source+Sans+Pro:400,700" rel="stylesheet" type="text/css" />
        <link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">

        <link rel="stylesheet" href="css/tutorial.css" />
        <link rel="stylesheet" href="../node_modules/prismjs/themes/prism.css">


        <!-- Dependencies: -->
        <script src="../node_modules/jquery/dist/jquery.js"></script>
        <script src="../node_modules/lodash/lodash.js"></script>
        <script src="../node_modules/backbone/backbone.js"></script>


        <link rel="stylesheet" type="text/css" href="../build/joint.min.css" />
        <script type="text/javascript" src="../build/joint.min.js"></script>

        <title>JointJS - JavaScript diagramming library - Getting started.</title>

    </head>
    <body class="language-javascript tutorial-page">

        <script>
            SVGElement.prototype.getTransformToElement = SVGElement.prototype.getTransformToElement || function (toElement) {
                return toElement.getScreenCTM().inverse().multiply(this.getScreenCTM());
            };
        </script>

        <div id="filters-gradients" class="tutorial">

            <h2>Filters and gradients in elements and links</h2>

            <p>This is an introduction to <a href="#filters" target="_self">filters</a> and
                <a href="#gradients" target="_self">gradients</a> to style your JointJS
                <a href="elements.html">elements</a> and <a href="links.html">links</a>.
                JointJS uses standard SVG
                <a href="https://developer.mozilla.org/en-US/docs/Web/SVG/Element/filter" target="_blank">filters</a>
                and
                <a href="https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Gradients" target="_blank">gradients</a>,
                only instead of writing the SVG markup code, you define your filters and gradients with plain JavaSript
                objects.
                JointJS then generates all the necessary SVG elements for you.</p>

            <h3 id="filters">Filters</h3>

            <p>Filters can be applied on <a href="custom-elements.html#markup">elements'</a> and
                <a href="custom-links.html#markup">links'</a> subelements using the <code>filter</code> attribute:</p>

            <ul>
                <li><code>filter</code> - the filter to use on this subelement.
                    Defining filters is addressed in the
                    <a href="/docs/jointjs#specialAttributes.filter" target="_blank">special attributes</a> section of
                    JointJS docs.</li>
            </ul>

            <p>There are two ways to set the <code>filter</code> attribute:</p>

            <ul>
                <li>As a string.
                    The value will be interpreted by the browser as usual
                    (<a href="https://css-tricks.com/almanac/properties/f/filter/">filter info</a>).
                    For example, if the <code>filter</code> attribute is set to <code>'url(#myfilter)'</code>, the
                    browser will try to find an element with ID <code>'myfilter'</code> - which can be an SVG
                    <code>&lt;filter&gt;</code> element - and apply that filter on the subelement.</li>
                <li>As an object.
                    In this case, JointJS will interpret the attribute as a <a href="special-attributes.html">special
                    attribute</a> and treat the object as a JointJS-specific filter definition with the following
                    format:</li>
            </ul>

            <pre><code>{
    name: string, // filter name
    args?: object // (optional) filter arguments (depending on the filter used)
}</code></pre>

            <p>The full list of built-in filters and their parameters can be found in the
                <a href="/docs/jointjs#specialAttributes.filter" target="_blank">API reference</a>.
                The following example shows all built-in filters in action.
                As you can see, filters can be applied on link subelements as well.</p>

            <div id="paper-filters"></div>

            <pre data-src="js/filters.js"></pre>

            <p>JointJS source code: <a href="js/filters.js" target="_blank">filters.js</a></p>

            <h3 id="gradients">Gradients</h3>

            <p>Gradients are applied within the <code>stroke</code> and <code>fill</code> attributes of
                <a href="custom-elements.html#markup">elements'</a> and
                <a href="custom-links.html#markup">links'</a> subelements:</p>

            <ul>
                <li><code>fill</code> - the fill to apply on this subelement.
                    Specifying the fill value is addressed in the
                    <a href="/docs/jointjs#specialAttributes.fill" target="_blank">special attributes</a> section of
                    JointJS docs.</li>
                <li><code>stroke</code> - the stroke to apply on this subelement.
                    Specifying the stroke value is addressed in the
                    <a href="/docs/jointjs#specialAttributes.stroke" target="_blank">special attributes</a> section of
                    JointJS docs.</li>
            </ul>

            <p>There are two ways to set these two attributes:</p>

            <ul>
                <li>As a string.
                    The value will be interpreted by the browser as usual
                    (<a href="https://css-tricks.com/almanac/properties/f/fill/">fill info</a>,
                    <a href="https://css-tricks.com/almanac/properties/s/stroke/">stroke info</a>).
                    Aside from straightforward values, such as <code>'orange'</code>, <code>'#ff0000'</code> or
                    <code>'rgba(255, 165, 0, 0.3)'</code>, this includes pattern references.
                    For example, if the <code>fill</code> attribute is set to <code>'url(#mypatterm)'</code>, the
                    browser will try to find an element with ID <code>'mypattern'</code> - which can be an SVG
                    <code>&lt;pattern&gt;</code> element - and apply that pattern on the subelement.</li>
                <li>As an object.
                    In this case, JointJS will interpret the attribute as a <a href="special-attributes.html">special
                    attribute</a> and treat the object as a JointJS-specific gradient definition with the following
                    format:</li>
            </ul>

            <pre><code>{
    type: 'linearGradient' | 'radialGradient', // type of gradient
    stops: Array<{ // an array of stop colors
        offset: string, // offset of the stop (percentage)
        color: string, // color of the stop
        opacity?: number // (optional) opacity of the stop (number between 0 and 1)
    attrs?: object // (optional) additional attributes for the gradient
}</code></pre>

            <p>There are two types of gradients, linear and radial.
                The following example shows both of them in action.
                Note how the last element uses the additional gradient attributes (<code>attrs</code>), which allows the
                direction of the gradient to be specified.</p>

            <div id="paper-gradients"></div>

            <pre data-src="js/gradients.js"></pre>

            <p>JointJS source code: <a href="js/gradients.js" target="_blank">gradients.js</a></p>

        </div><!--end tutorial-->

        <script src="../node_modules/prismjs/prism.js"></script>

        <script src="js/filters.js"></script>
        <script src="js/gradients.js"></script>
    </body>
</html>
